<template>
	<view class="">
		<uni-nav-bar @clickLeft="goback" left-icon="back" title="确认订单" fixed :border="false"></uni-nav-bar>
		<view class="order_top">
			<view class="flex1">
				<view class="">
					取餐时间：{{product.takeTimeBegin?product.takeTimeBegin.substring(0,5):''}}-{{product.takeTimeEnd?product.takeTimeEnd.substring(0,5):''}}
				</view>
				<image @click="opents" src="/static/icon/ts.png" mode=""></image>
			</view>
			<view class="address">
				<view class="" style="flex: 1;">
					<view class="">
						{{shop.address}}
					</view>
					<view class="" style="color: #29A85C;">
						距离您{{distance}}
					</view>
				</view>
				<view class="right">
					<image src="/static/icon/dh.png" mode="" @click="$opennavigation(shop)"></image>
					<image src="/static/icon/sj.png" mode="" @click="$phoneCall(shop.shopPhone )"></image>
				</view>
			</view>
		</view>
		<view class="oredr_detail">
			<view class="tit">商品</view>
			<view class="item_cont">
				<view class="item_l">
					<image :src="product.img[0]" mode="aspectFill"></image>
					<view class="item_l_text">
						<view class="">{{product.productName}}</view>
						<view class="tipflex">
							<view class="its" v-for="(item,index) in product.category" :key="index">{{item}}</view>
						</view>
					</view>
				</view>
				<view class="item_r">
					<view class="" style="text-align: right;">
						共 {{num}} 件
					</view>
					<view class="" style="display: flex;align-items: center;">
						<view class="FINE" style="margin-right: 20rpx;">
							￥{{product.priceOldBegin}}-{{product.priceOldEnd}}
						</view>
						<view class="DINB">
							<span class="ic">￥</span>{{product.price}}
						</view>
					</view>
				</view>
			</view>

			<view class="juan">
				<view class="">
					消费券
				</view>
				<view v-if="iscoupon" class="flex_b" @click="openPop">
					<view class="test1" v-if="isprice">
						-￥{{isprice}}
					</view>
					<view class="test" v-else>
						去使用
					</view>
					<uni-icons type="right" size="16"></uni-icons>
				</view>
				<view v-else class="flex_b">
					<view class="test">
						不可使用
					</view>
				</view>
			</view>

			<view class="juan">
				<view class="">
					合计
				</view>
				<view class="DINB">
					<span class="ic">￥</span>{{allprice}}
				</view>
			</view>
		</view>

		<view class="zhifu">
			<view class="tit">支付方式</view>
			<view class="items" @click="wxpay">
				<view class="items_l">
					<image src="/static/icon/wx.png" mode=""></image>
					<view class="ts">
						微信支付
					</view>
				</view>
				<view class="items_r">
					<image v-if="createOrder.payType =='微信支付'" src="/static/yuana.png" mode=""></image>
					<image v-else src="/static/yuan.png" mode=""></image>
				</view>
			</view>

			<view class="items" @click="changeLp" >
				<view class="items_l">
					<image src="/static/icon/yh.png" mode=""></image>
					<view class="ts">
						礼品卡支付（不支持使用消费券）
					</view>
				</view>
				<view class="items_r">
					<uni-icons v-if="isopen" type="top" size="16"></uni-icons>
					<uni-icons v-else type="down" size="16"></uni-icons>
				</view>
			</view>
			<view class="lplist" v-if="isopen">
				<view class="item" v-for="(item,index) in list" :key="index" @click="cardClick(item)">
					<view class="item_l">
						<view class="yuan" :style="{background:item.color}">
							<image src="../static/icon/lp.png" mode=""></image>
						</view>
						<view class="t">
							{{item.cardName}} （{{item.cardNumber.substr(-4)}}）
						</view>
						<view class="g" v-if="item.end == '1'">
							已过期
						</view>
						<view class="p" v-else>
							￥{{item.amountBalance}}
						</view>

					</view>
					<view class="item_r" v-if="item.end == '0'">
						<image v-if="item.isclick" src="/static/yuana.png" mode=""></image>
						<image v-else src="/static/yuan.png" mode=""></image>
					</view>
					<view class="item_r" v-else>
						<image src="/static/yuanx.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<view class="" style="height: 220rpx;"></view>
		<view class="footer">
			<view class="cont">
				<view class="" style="display: flex;align-items: center;">
					合计：
					<view class="" style="display: flex;align-items: center;">
						<view class="DINB">
							<span class="ic">￥</span>{{allprice}}
						</view>
						<view class="FINE" style="margin-left: 20rpx;margin-top: 20rpx;">
							￥{{product.priceOldBegin}}-{{product.priceOldEnd}}
						</view>
					</view>
				</view>
				<view class="btn" @click="handleCreateOrder">
					立即支付
				</view>
			</view>
		</view>
		<clearts ref="popupts"></clearts>
		<uni-popup ref="popup" type="bottom" :safe-area="false">
			<view class="popup">
				<view class="tit">消费券</view>
				<view class="shop_t">
					<view @click="change(1)" :class="typechang == 1?'ats':'ts'">
						可使用
					</view>
					<view @click="change(2)" :class="typechang == 2?'ats':'ts'">
						不可用
					</view>
				</view>
				<scroll-view scroll-y="true" class="scroll">
					<view class="coupon" v-for="(item,index) in couponList" :key="index"
						:style="{background:typechang == 1?'#2A2C3D':'#C3C3C3'}" @click="couponClick(item)">
						<view class="coupon-info coupon-hole">
							<view class="t1" :style="{color:typechang == 1?'#29A85C':'#ffffff'}">
								{{item.amountobj.integer}}
								<text style="font-size: 40rpx;"
									v-if="item.amountobj.decimal">.{{item.amountobj.decimal}}</text>
							</view>
							<view class="t2">
								满 {{item.amountRequire}} 可用
							</view>
						</view>
						<view class="coupon-get">
							<view class="">
								<view class="t1">
									全平台通用
								</view>
								<view class="t2">
									有效期至 {{item.endTime.substring(0,10)}}
								</view>
							</view>
							<view class="" v-if="typechang == 1">
								<image v-if="item.isclick" src="../static/d.png" mode=""></image>
								<image v-else src="../static/yuan.png" mode=""></image>
							</view>
							<view class="btns" v-else>
								<!-- <view class="btn">已使用</view> -->
								<view class="btn">已失效</view>
							</view>
						</view>
					</view>
					<view class="" style="height: 50rpx;"></view>
					<view class="kong" v-if="nolist">
						<view class="">
							<image src="../static/juank.png" mode=""></image>
							<view class="ts">
								尚无消费券
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="btn" @click="handleJUAN" v-if="typechang == 1">
					确定
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="popuplp" type="center">
			<view class="popuplp" v-if="cardInfo.cardName">
				<view class="tit">
					是否确认使用{{cardInfo.cardName}}（{{cardInfo.cardNumber.substr(-4)}}）？
				</view>
				<view class="btns">
					<view class="b1 btn" @click="close">取消</view>
					<view class="b2 btn" @click="confirm">确认</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		productInfo,
		couponorderYes,
		couponorderNo,
		cardorderYes,
		createOrderApi
	} from '@/common/http.api.js';
	export default {
		data() {
			return {
				typechang: 1,
				colorList: [
					'#C30000',
					'#EB5A00',
					'#29A85C',
					'#FFAF43',
					'#000000',
				],
				list: [], //礼品卡列表
				isopen: false, //礼品卡展开
				cardInfo: {},
				params: {
					productId: '',
					productCount: '',
					pageNum: 1,
					pageSize: 5
				},
				couponList: [],
				nolist: false,
				iscoupon: true, //能否使用消费卷
				isprice: 0, //消费卷金额展示



				product: {},
				shop: {},
				distance: '',
				num: 0,

				createOrder: {
					productId: '', //商品ID
					productCount: '', //商品数量
					payType: '微信支付', //支付类型：微信支付、礼品卡支付
					couponReceiveId: '', //消费卷ID
					cardDetailId: '' //礼品卡ID
				}
			};
		},
		computed: {
			allprice() {
				return (this.product.price * this.num - this.isprice).toFixed(2)
			}
		},
		onLoad(option) {

			let obj = JSON.parse(decodeURIComponent(option.obj))
			// let obj = uni.getStorageSync('obj')
			this.distance = obj.distance
			this.num = obj.num
			this.params.productId = obj.productid
			this.params.productCount = obj.num
			this.createOrder.productId = obj.productid
			this.createOrder.productCount = obj.num
			productInfo({
				id: obj.productid
			}).then(res => {
				res.data.product.img = res.data.product.img.split(',')
				res.data.product.category = res.data.product.category.split(',')
				this.product = res.data.product
				this.shop = res.data.shop
			})
		},
		methods: {

			//打开消费劵弹窗
			openPop() {
				couponorderYes(this.params).then(res => {
					res.data.forEach(item => {
						item.isclick = (item.id == this.createOrder.couponReceiveId)
						item.amountobj = this.$splitNumber(item.amount);
					})
					this.couponList = res.data
					this.nolist = (res.data.length == 0)
					this.$refs.popup.open()
				})
			},
			change(i) {
				this.typechang = i
				this.params.pageNum = 1
				this.couponList = []
				if (i == 1) {
					couponorderYes(this.params).then(res => {
						res.data.forEach(item => {
							item.amountobj = this.$splitNumber(item.amount);
							item.isclick = false
						})
						this.couponList = res.data
						this.nolist = (res.data.length == 0)
						// let total = Math.ceil(res.total / this.params.pageSize);
						// this.nolist = total == 0
					})
				} else {
					couponorderNo(this.params).then(res => {
						res.rows.forEach(item => {
							item.amountobj = this.$splitNumber(item.amount);
						})
						this.couponList = res.rows
						this.nolist = (res.rows.length == 0)
						// let total = Math.ceil(res.total / this.params.pageSize);
						// this.nolist = total == 0
					})
				}
			},
			//选择消费卷
			couponClick(item) {
				console.log(item.isclick, '1111111');
				// this.couponList.forEach(item=>{item.isclick = false})	
				item.isclick = !item.isclick
				if (item.isclick) {
					this.isprice = item.amount
					this.createOrder.couponReceiveId = item.id
				} else {
					this.isprice = 0
					this.createOrder.couponReceiveId = ''
				}
			},
			handleJUAN() {
				this.$refs.popup.close()
			},

			//礼品卡展开关闭
			changeLp() {
				this.isopen = !this.isopen
				cardorderYes({}).then(res => {
					res.data.forEach(item => {
						item.color = this.colorList[Math.floor(Math.random() * 5)]
						item.isclick = (item.id == this.createOrder.cardDetailId)
					})
					this.list = res.data
				})
			},
			//礼品卡点击 1 点击后清楚消费卷id 2 消费卷变为不可选 3 修改当前支付方式 4 增加礼品卡id
			cardClick(item) {
				console.log(item);
				if (item.end == '1') {
					uni.showToast({
						icon: 'none',
						title: '当前礼品卡已过期'
					})
					return
				}
				this.list.forEach(item => {
					item.isclick = false
				})
				this.isprice = 0
				item.isclick = !item.isclick
				this.cardInfo = item
				this.createOrder.couponReceiveId = ''
				this.iscoupon = false
				this.createOrder.payType = '礼品卡支付'
				this.createOrder.cardDetailId = item.id
			},
			//点击 微信支付
			wxpay() {
				this.list.forEach(item => {
					item.isclick = false
				})
				this.iscoupon = true
				this.createOrder.payType = '微信支付'
				this.createOrder.cardDetailId = ''
			},
			getCode() {
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						console.log(loginRes, '------');
						if (loginRes.errMsg == "login:ok") {
							return loginRes.code
						}
					}
				});
			},
			//立即支付点击
			handleCreateOrder() {
				let that = this
				if (that.createOrder.payType == '微信支付') {
					//微信支付
					uni.showLoading({
						title: '支付中....'
					})
					uni.login({
						provider: 'weixin',
						success: function(loginRes) {
							if (loginRes.errMsg == "login:ok") {
								that.createOrder.openIdCode = loginRes.code
								createOrderApi(that.createOrder).then(res => {
									if (res.code == 200) {
										let obj = res.data.pay_info.acc_resp_fields
										uni.hideLoading()
										uni.requestPayment({
											"provider": "wxpay", //固定值为"wxpay"
											appid: obj.app_id, // 应用ID（AppID）
											package: obj.package, // 固定值
											nonceStr: obj.nonce_str, // 随机字符串
											timeStamp: obj.time_stamp, // 时间戳（单位：秒）
											signType: obj.sign_type, // 签名，这里用的 MD5 签名
											paySign: obj.pay_sign,
											success: function(res) {
												console.log("支付成功", res);
												uni.switchTab({
													url: '/pages/order/order'
												})
											},
											fail: function(err) {
												console.log('支付失败:', err);
												uni.showToast({
													icon: 'none',
													title: '支付取消'
												})
												setTimeout(()=>{
													uni.switchTab({
														url: '/pages/order/order'
													})
												},300)
											}
										});
									}
								})
							}
						}
					});
				} else {
					that.$refs.popuplp.open()
				}
			},
			close() {
				this.$refs.popuplp.close()
			},
			confirm() {
				createOrderApi(this.createOrder).then(res => {
					if (res.code == 200) {
						res.data.order_info.c = this.product.c
						uni.setStorageSync('obj', res.data.order_info)
						uni.navigateTo({
							url: `/mainpage/paymentresults?obj=` + encodeURIComponent(JSON.stringify(res
								.data.order_info))
						})
						setTimeout(() => {
							this.$refs.popuplp.close()
						}, 1000)
					}
				})
			},
			goback() {
				uni.navigateBack()
			},
			opents() {
				this.$refs.popupts.open()
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #FBFBFB;
	}

	.order_top {
		width: 100%;
		padding: 20rpx 20rpx 40rpx;
		box-sizing: border-box;
		background: #fff;

		.flex1 {
			display: flex;
			align-items: center;
			height: 68rpx;
			background: #F3F3F3;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #000000;
			justify-content: space-between;
			padding: 0rpx 20rpx;
			box-sizing: border-box;

			image {
				width: 32rpx;
				height: 33rpx;
			}
		}

		.address {
			background: #F3F3F3;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #000000;
			padding: 15rpx 20rpx;
			box-sizing: border-box;
			margin: 20rpx auto 0rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.right {
				image {
					width: 32rpx;
					height: 33rpx;
					margin-left: 30rpx;
				}
			}
		}
	}

	.oredr_detail {
		width: 750rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		margin: 20rpx auto;
		padding: 22rpx 20rpx;
		box-sizing: border-box;

		.tit {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #000000;
		}

		.item_cont {
			display: flex;
			justify-content: space-between;
			margin: 40rpx auto;

			.tipflex {
				display: flex;
				align-items: center;

				.its {
					height: 44rpx;
					background: #F6F6F6;
					border-radius: 8rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #7B7B7B;
					line-height: 44rpx;
					padding: 0rpx 16rpx;
					margin-right: 10rpx;
				}
			}

			.item_l {
				display: flex;

				image {
					width: 100rpx;
					height: 100rpx;
					border-radius: 8rpx;
				}

				.item_l_text {
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: 30rpx;
					color: #000000;
					margin-left: 16rpx;
					height: 100rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					span {
						height: 44rpx;
						background: #F6F6F6;
						border-radius: 8rpx 8rpx 8rpx 8rpx;
						padding: 0rpx 10rpx;
						font-weight: 500;
						font-size: 24rpx;
						color: #7B7B7B;
						line-height: 44rpx;
						text-align: center;
						margin-right: 10rpx;

					}
				}
			}

			.item_r {
				height: 100rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #000000;

			}
		}

		.juan {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #000000;
			margin-bottom: 32rpx;
		}

		.flex_b {
			.test1 {
				padding: 2rpx 6rpx;
				font-family: 'DINB';
				font-size: 28rpx;
				color: #FFFFFF;
				line-height: 33rpx;
				background: #29A85C;
				border-radius: 0rpx 0rpx 0rpx 0rpx;
			}

			.test {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #D1CDCD;
			}
		}
	}

	.zhifu {
		width: 750rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		padding: 22rpx 20rpx;
		box-sizing: border-box;

		.tit {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #000000;
		}

		.items {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 40rpx auto 0rpx;

			.items_l {
				display: flex;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #000000;

				image {
					width: 40rpx;
					height: 40rpx;
				}

				.ts {
					margin-left: 20rpx;
				}

			}

			.items_r {
				image {
					width: 40rpx;
					height: 40rpx;
				}
			}
		}

		.lplist {
			width: 100%;
			padding: 0rpx 0rpx 0rpx 60rpx;
			box-sizing: border-box;

			.item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1px solid #eee;
				padding-bottom: 26rpx;
				margin-top: 20rpx;

				.item_l {
					display: flex;
					align-items: center;

					.yuan {
						width: 40rpx;
						height: 40rpx;
						border-radius: 20rpx;

						image {
							width: 40rpx;
							height: 40rpx;
						}
					}

					.t {
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #000000;
						margin-left: 20rpx;
					}

					.p {
						font-family: 'DINB';
						font-weight: 500;
						font-size: 20rpx;
						color: #FFFFFF;
						height: 32rpx;
						background: #29A85C;
						padding: 0rpx 10rpx;
						line-height: 32rpx;
						margin-left: 20rpx;
					}

					.g {
						color: #CACACA;
						font-weight: 500;
						font-size: 20rpx;
						height: 32rpx;
						background: #EEEEEE;
						border-radius: 0rpx 0rpx 0rpx 0rpx;
						padding: 0rpx 10rpx;
						line-height: 32rpx;
						margin-left: 20rpx;
					}
				}

				.item_r {
					image {
						width: 40rpx;
						height: 40rpx;
					}
				}
			}

			.item:last-child {
				padding-bottom: 0rpx;
				border-bottom: none;
			}
		}
	}

	.footer {
		width: 750rpx;
		height: 120rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -4rpx 7rpx 0rpx rgba(210, 185, 178, 0.38);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		position: fixed;
		bottom: 0%;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);

		.cont {
			display: flex;
			justify-content: space-between;
			padding: 10rpx 20rpx;
			height: 120rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			align-items: center;

			.btn {
				width: 240rpx;
				height: 92rpx;
				background: #000000;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #FFFFFF;
				line-height: 92rpx;
				text-align: center;
			}
		}
	}

	.popup {
		width: 100%;
		background-color: #FFFFFF;
		padding: 46rpx 0rpx;
		box-sizing: border-box;
		font-family: PingFang SC, PingFang SC;
		height: 950rpx;

		.tit {
			text-align: center;
			font-weight: bold;
			font-size: 40rpx;
			color: #000000;
		}

		.shop_t {
			display: flex;
			margin-top: 20rpx;

			.ts {
				width: 50%;
				text-align: center;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #979797;
				padding-bottom: 20rpx;
				border-bottom: 2px solid #E6E6E6;
			}

			.ats {
				width: 50%;
				text-align: center;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 32rpx;
				color: #000000;
				padding-bottom: 20rpx;
				border-bottom: 2px solid #000000;
			}
		}

		.scroll {
			height: 580rpx;

			::-webkit-scrollbar {
				display: none;
				width: 0 !important;
				height: 0 !important;
				-webkit-appearance: none;
				background: transparent;
			}

			.kong {
				width: 100%;
				margin: 100rpx auto;
				display: flex;
				align-items: center;
				justify-content: center;
				text-align: center;

				image {
					width: 228rpx;
					height: 228rpx;
				}

				.ts {
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: 36rpx;
					color: #000000;
					margin-top: 20rpx;
				}
			}
		}

		.its {
			width: 710rpx;
			height: 178rpx;
			margin: 20rpx auto;
			position: relative;

			image {
				width: 100%;
				height: 178rpx;
			}

			.abs {
				top: 0%;
				position: absolute;
				width: 100%;
				height: 178rpx;
				display: flex;

				image {
					width: 40rpx;
					height: 40rpx;
				}

				.abs_l {
					width: 180rpx;
					text-align: center;
					padding: 40rpx 0rpx;
					box-sizing: border-box;

					.t1 {
						font-family: 'FINE';
						font-weight: bold;
						font-size: 72rpx;
						color: #29A85C;
					}

					.t2 {
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 24rpx;
						color: #FFFFFF;
					}
				}

				.abs_r {
					padding: 38rpx;
					box-sizing: border-box;
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.t1 {
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						font-size: 32rpx;
						color: #FFFFFF;
					}

					.t2 {
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 20rpx;
						color: #FFFFFF;
						margin-top: 30rpx;
					}

					.btn {
						font-weight: bold;
						font-size: 30rpx;
						color: #FFFFFF;
						width: 148rpx;
						height: 56rpx;
						background: #C3C3C3;
						border-radius: 0rpx 0rpx 0rpx 0rpx;
						border: 2rpx solid #FFFFFF;
						text-align: center;
						line-height: 56rpx;
					}
				}
			}
		}

		.btn {
			width: 710rpx;
			height: 100rpx;
			background: #000000;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 100rpx;
			text-align: center;
			margin: 20rpx auto;
		}
	}

	.popuplp {
		width: 630rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		padding: 80rpx 54rpx 54rpx;
		box-sizing: border-box;

		.tit {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #000000;
			text-align: center;
		}

		.btns {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 50rpx;

			.btn {
				width: 240rpx;
				height: 92rpx;
				background: #FFFFFF;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				text-align: center;
				line-height: 92rpx;
			}

			.b1 {
				color: #D9D9D9;
				border: 2rpx solid #D9D9D9;
			}

			.b2 {
				color: #ffffff;
				background: #000000;
			}
		}
	}









	.coupon {
		display: inline-flex;
		color: white;
		position: relative;
		overflow: hidden;
		background: #2A2C3D;
		width: 710rpx;
		height: 178rpx;
		left: 20rpx;
		margin: 20rpx auto 0rpx;
	}

	/* 左边框的波浪 */
	.coupon::after {
		content: '';
		position: absolute;
		top: 0;
		height: 100%;
		width: 28rpx;
		background-image: radial-gradient(white 0, white 8rpx, transparent 8rpx);
		/** 如果只设置为半径的两倍(直径)，那么半圆之间没有类似堤岸的间隔 */
		background-size: 28rpx 28rpx;
		background-position: 0 4rpx;
		background-repeat: repeat-y;
		z-index: 1;
	}

	.coupon::after {
		right: -14rpx;
	}

	.coupon-info {
		padding: 20rpx 0rpx;
		position: relative;
		min-width: 188rpx;
		border-right: 1px dashed #838597;
		box-sizing: border-box;
		text-align: center;

		.t1 {
			font-family: 'FINE';
			font-weight: bold;
			font-size: 72rpx;
			color: #29A85C;
		}

		.t2 {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #FFFFFF;
		}
	}

	.coupon-info::before {
		top: -0.5rem;
	}

	.coupon-info::after {
		bottom: -0.5rem;
	}

	// /* 使用两个边框为圆角的白色div制造半圆缺角，有个缺点是这个缺角必须与背景色相同（clip-path不好弄） */
	.coupon-hole::before,
	.coupon-hole::after {
		content: '';
		width: 1rem;
		height: 1rem;
		background-color: white;
		border-radius: 50%;
		position: absolute;
		right: -0.5rem;
	}

	.coupon-get {
		padding: 38rpx;
		box-sizing: border-box;
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: space-between;

		image {
			width: 40rpx;
			height: 40rpx;
		}

		.t1 {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #FFFFFF;
		}

		.t2 {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 20rpx;
			color: #FFFFFF;
			margin-top: 30rpx;
		}

		.btn1 {
			font-weight: bold;
			font-size: 30rpx;
			color: #FFFFFF;
			width: 148rpx;
			height: 56rpx;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			border: 2rpx solid #FFFFFF;
			text-align: center;
			line-height: 56rpx;
		}

		.btn {
			font-weight: bold;
			font-size: 30rpx;
			color: #FFFFFF;
			width: 148rpx;
			height: 56rpx;
			background: #C3C3C3;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			border: 2rpx solid #FFFFFF;
			text-align: center;
			line-height: 56rpx;
		}
	}
</style>